<template>
  <div>
    <!-- 正在热映-->
    <el-row
        v-show="beOnStatus === 1"
        :gutter="10"
        v-for="i in 5"
        class="movie-row">
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[6*(i-1)]" v-if="[6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[1+6*(i-1)]" v-if="[1+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[2+6*(i-1)]" v-if="[2+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[3+6*(i-1)]" v-if="[3+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[4+6*(i-1)]" v-if="[4+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <hot-showing-movie-info
            :movie-info="movieList[5+6*(i-1)]" v-if="[5+6*(i-1)] < movieList.length"/>
      </el-col>
    </el-row>
    <!-- 即将上映-->
    <el-row
        class="movie-row"
        v-show="beOnStatus === 2"
        :gutter="10"
        v-for="i in 5">
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[6*(i-1)]" v-if="[6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[1+6*(i-1)]" v-if="[1+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[2+6*(i-1)]" v-if="[2+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[3+6*(i-1)]" v-if="[3+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[4+6*(i-1)]" v-if="[4+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <will-on-movie-info
            :is-show-show-date="false"
            :show-buy-button="false"
            :movie-info="movieList[5+6*(i-1)]" v-if="[5+6*(i-1)] < movieList.length"/>
      </el-col>
    </el-row>
    <!-- 经典影片-->
    <el-row
        class="movie-row"
        v-show="beOnStatus === 3"
        :gutter="10"
        v-for="i in 5">
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[6*(i-1)]" v-if="[6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[1+6*(i-1)]" v-if="[1+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[2+6*(i-1)]" v-if="[2+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[3+6*(i-1)]" v-if="[3+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[4+6*(i-1)]" v-if="[4+6*(i-1)] < movieList.length"/>
      </el-col>
      <el-col :span="4">
        <old-movie-info
            :old-movie-info="movieList[5+6*(i-1)]" v-if="[5+6*(i-1)] < movieList.length"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HotShowingMovieInfo from "@/views/home/left/hot_showing/HotShowingMovieInfo";
import WillOnMovieInfo from "@/views/home/left/will_on/WillOnMovieInfo";
import OldMovieInfo from "@/views/home/left/old_movie/OldMovieInfo";

export default {
  name: "movieSearchList",
  components: {
    HotShowingMovieInfo,
    WillOnMovieInfo,
    OldMovieInfo
  },
  data() {
    return {}
  },
  props: {
    movieList: {
      type: Array,
      default() {
        return []
      }
    },
    beOnStatus: Number
  },
}
</script>

<style scoped>
.movie-row {
  margin-top: 30px;
}
</style>
